<template>
    <div class="detailOfDailyNew" v-loading="pageLoading">
        <!-- 分期付款交易明细查询 -->
        <el-card shadow="never" element-loading-background="rgba(250, 250, 250, 0.7)">
            <div slot="headerss" class="clearfix">
                <span>分期付款交易明细查询</span>
            </div>
            <div class="form-row">
                <el-form v-model="formData" label-width="40%" size="small">
                    <el-row style="margin: 0 auto;">
                        <el-form-item label="账户类别:" label-position="left" prop="accountType">
                            <el-input v-model="accountType" disabled style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                            <el-input v-model="formData.mainCardNo" disabled style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="起始日期:" label-position="left" prop="startDate">
                            <el-date-picker
                                style="width: 200px;"
                                v-model="formData.startDate"
                                type="date"
                                placeholder="请选择出生日期"
                                format="yyyy-MM-dd"
                                value-format="yyyyMMdd"
                                :picker-options="startOptions"
                            ></el-date-picker>
                            <span class="Notice">(YYYYMMDD)</span>
                        </el-form-item>
                        <el-form-item label="结束日期:" label-position="left" prop="endDate">
                            <el-date-picker
                                style="width: 200px;"
                                v-model="formData.endDate"
                                type="date"
                                placeholder="请选择出生日期"
                                format="yyyy-MM-dd"
                                value-format="yyyyMMdd"
                                :picker-options="endtOptions"
                            ></el-date-picker>
                            <span class="Notice">(YYYYMMDD)</span>
                        </el-form-item>
                        <div class="btnBox">
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="dialogTable"
                            >查询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                            >重置</el-button>
                            <el-button type="primary" size="small" @click="handleClose">关闭</el-button>
                        </div>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <div v-if="flag">
            <div class="dialogVisible">
                <el-table
                    :data="tableData"
                    width="100%"
                    border
                    stripe
                    class="heard-bg business_table"
                >
                    <el-table-column label="交易日期">
                        <template slot-scope="scope">
                            <span>{{scope.row.BEGDAY | formatDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" prop="DESC1"></el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.STATUS === 'C'">完成</span>
                            <span v-else-if="scope.row.STATUS === 'E'">错误终止</span>
                            <span v-else-if="scope.row.STATUS === 'F'">退货终止</span>
                            <span v-else-if="scope.row.STATUS === 'N'">新增的</span>
                            <span v-else-if="scope.row.STATUS === 'P'">提前还款</span>
                            <span v-else-if="scope.row.STATUS === 'R'">重新激活</span>
                            <span v-else-if="scope.row.STATUS === 'X'">暂停</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分期付款类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.MPTYPE === 'A'">灵活分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'C'">信用计划分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'B'">余额转移</span>
                            <span v-else-if="scope.row.MPTYPE === 'H'">银联POS分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'L'">大额分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'M'">邮购分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'P'">自行POS分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'S'">深圳银联POS分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'Y'">余额/账单分期</span>
                            <span v-else-if="scope.row.MPTYPE === 'D'">自动分期</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="币种" prop="CURRNUM"></el-table-column>
                    <el-table-column label="卡号" prop="CARDNBR"></el-table-column>
                    <el-table-column label="分期付款金额" prop="MPAMT"></el-table-column>
                    <el-table-column label="期数" prop="MPMTHS"></el-table-column>
                    <el-table-column label="月还款本金" prop="MPINSTAL"></el-table-column>
                    <el-table-column label="手续费金额" prop="FEEAMT"></el-table-column>
                    <el-table-column label="已摊销次数" prop="INSTCNT"></el-table-column>
                    <el-table-column label="已摊销总金额" prop="PAYAMT"></el-table-column>
                    <el-table-column label="剩余期数" prop="PPLMTHS"></el-table-column>
                    <el-table-column label="剩余未摊销本金" prop="REMPBAL"></el-table-column>
                    <el-table-column label="手续费收取类型" prop="PPLAMT"></el-table-column>
                    <el-table-column label="剩余未摊销手续费" prop="REMFEE"></el-table-column>
                    <el-table-column label="总手续费率">
                        <template slot-scope="scope">
                            <span>{{parseFloat(scope.row.MPAMT + scope.row.FEEAMT)}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <el-button
                    v-if="currentPageIndex > 0"
                    type="primary"
                    size="small"
                    @click="handleChangePage('pre')"
                >上一页</el-button>
                <el-button
                    v-if="nextButtonFlag"
                    type="primary"
                    size="small"
                    @click="handleChangePage('next')"
                >下一页</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import { closePage, trimString, getAccountTypeName } from '@/utils/Common';

export default {
    name: 'PaymentTransactionDetails',
    data() {
        return {
            pageLoading: false, // 页面loading
            nextButtonFlag: false, // 下翻页按钮 显示控制阀
            flag: false,
            // 表单数据
            formData: {
                startDate: '20201116',
                endDate: '20201216',
                mainCardNo: '',
            },
            //账户类型
            accountType: '',
            cardNumber: '',
            // 单选数据
            radioData: 2,
            tableData: [],
            rules: { // 表单校验规则
                startDate: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                endDate: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },
                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.formData.endDate) {
                        return time.getTime() > new Date(moment(this.formData.endDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formData.startDate) {
                        return time.getTime() < new Date(moment(this.formData.startDate).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页下一页’  按钮的显示控制阀

        };
    },
    filters: {
        // 日期格式转换
        formatDate(val) {
            const text = `${val}`;
            return moment(text).format('YYYY-MM-DD');
        },
    },
    async mounted() {
        this.formData.mainCardNo = this.cardInfo_3004.CARDNO
        // 获取账户类别
        //console.log(this.cardList_3601, 'this.cardList_3601')
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this)
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        handleReset() {
            this.formData = {
                startDate: '20201116',
                endDate: '20201216',
                mainCardNo: '',
            };
        },
        // 点击关闭 处理事件
        handleClose() {
            closePage(this.$route, this, 1);
        },
        dialogTable() {
            this.pageLoading = true;
            this.flag = true;
            // 设置请求参数
            let NEXTDAY = this.formData.startDate;
            let NEXTMPNO = 0;
            if (this.pagingDataList.length) { // 判断翻页上传字段取值
                NEXTDAY = this.pagingDataList[this.currentPageIndex].NEXTDAY;
                NEXTMPNO = this.pagingDataList[this.currentPageIndex].NEXTMPNO;
            }
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                // 空或Z：全部  A：灵活分期 C：信用计划分期 B：余额转移 H：银联POS分期 L：大额分期 M：邮购分期  P：自行POS分期 S：深圳银联POS分期 Y：余额/账单分期 D：自动分期
                MPTYPE: '', // 分期付款类型
                OPERCODE: 0, // 操作代码  0全部返回  1可提前还款的分期交易    2可撤销的分期交易
                OPT: 1, // 查询方式 1-用卡号查询 2-用证件号码查询
                CUSTNBR: '', // 证件号码 查询方式为2时，必填
                KEYTYPE: '', // 证件类型 查询方式为2时，必填 以银行在CODES/ETHNC中参数定义为准
                CATE: this.accountType, // 账户类别 查询方式为2时，必填
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                BEGDAY: this.formData.startDate, // 起始日期
                ENDDAY: this.formData.endDate, // 终止日期
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                NEXTDAY, // 首次查询时送查询起始日期， 下翻页查询时上送上次查询结果的最后一条记录返回的分期付款交易日期
                NEXTMPNO, // 首次查询时送起始序号，默认为0 下翻页查询时上送上次查询结果的最后一条记录返回的交易序号
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3077';
            defaultParams.body.appBody = appBody;
            // 3077交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList || [];
                        const currentPagingData = {
                            NEXTDAY: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTDAY,
                            NEXTMPNO: result.body.appBody.dataList[result.body.appBody.dataList.length - 1].NEXTMPNO,
                        };
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        let flag = false;
                        let currentIndex;
                        this.pagingDataList.forEach((item, index) => { // 判断此次查询数据最后一条记翻页分期付款序号是否在已有列表中
                            if (item.NEXTMPNO === currentPagingData.NEXTMPNO) {
                                flag = true;
                                currentIndex = index;
                            }
                        });
                        if (flag) { // 存在
                            this.currentPageIndex = currentIndex;
                        } else {
                            this.pagingDataList.push(currentPagingData);
                            this.currentPageIndex = this.pagingDataList.length - 1;
                        }
                    }
                    else {
                        this.$message.error(result.sysHead.rpsMs);
                    }
                } else {
                    this.$message.error('网络请求失败!');
                }
            });
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                }
                this.getListData();
            } else { // 切换到下一页
                getListData();
            }
        },
    },
};
</script>

<style lang='scss' scoped>
.Notice {
    font-size: 12px;
    color: red;
    margin-left: 15px;
}
.daily-contnair {
    /deep/.el-card__header {
        padding: 8px !important;
    }
    .form-row {
        margin: 0 auto;
        .el-select {
            width: 100%;
            // margin-bottom: 15px;
        }
    }
    /deep/.el-row {
        margin-bottom: 10px;
    }
}
.btnBox {
    width: 30%;
    margin: 0 auto;
}
</style>
